import { defineStore } from 'pinia';
// 1. 定义并导出容器
// 1.1 参数一：容器ID,必须唯一，将来Pinia会吧所有的额容器挂载到更容器
// 1.2 参数二：选项对象
const useCounterStore = defineStore('counter', {
  /**
   * 类似vue组价的data，用来存储全局状态
   * 1. 必须是函数，这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染
   * 2. 必须是箭头函数，这是为了更好的TS类型推导
   */
  state: () => {
    return { num: 999, info:'message',arr:[1,2,3] }
  },
  // state: () => ({ count: 0 })
  /**
   * 类似组件的methods 封装业务逻辑，修改state
   */
  actions: {
    // 注意：不能使用箭头函数定义action。（this指向改变）
    increment(num) {
      // 方法一：
      // this.num+=num
      // this.info = `执行了+${num}操作，结果为${this.num}`
      // this.arr.push(num)
      // 方法二：$patch为函数 (推荐)，性能更好一点
      this.$patch(state=>{
        state.num+=num,
        state.info = `执行了+${num}操作，结果为${state.num}`,
        state.arr.push(num)
      })
      // 方法三：$patch为对象
      // this.$patch({
      //   num: this.num+num,
      //   info: `执行了+${num}操作，结果为${this.num+num}`,
      //   arr: [...this.arr,num]
      // })
    },
  },
  /**
   * 类似组件的computed，用来封装计算属性，有缓存的功能
   */
  getters: {
    // 函数接收一个可选参数：state状态对象。
    // 为什么是可选的呢？
    // 因为可以使用`this`
    count10(state) {
      console.log('getters被调用了');
      return state.num + 10
    }
  },
})
export default useCounterStore;
